<template>
  <view
    @tap="handleItemClick"
    class="bg-white rounded-[28rpx] p-[32rpx] shadow-md relative flex flex-col hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
  >
    <!-- 热门标签 -->
    <!-- <view v-if="item.isHot" class="absolute top-[16rpx] right-[16rpx] bg-[#FF4D4F] text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-[6rpx]">
      热门
    </view> -->

    <!-- 头部 -->
    <view class="flex justify-between items-center mb-[18rpx]">
      <view class="text-[32rpx] font-bold text-[#222] flex-1 truncate">{{
        item.title
      }}</view>
      <view
        class="text-[22rpx] px-[20rpx] py-[8rpx] rounded-[16rpx] font-medium"
        :class="item.statusClass"
        >{{ item.status }}</view
      >
    </view>

    <!-- 描述 -->
    <view
      class="text-[26rpx] text-[#666] mb-[10rpx] leading-[1.7] line-clamp-2"
      >{{ item.desc }}</view
    >

    <!-- 分阶段任务标记（仅悬赏类） -->
    <view
      v-if="item.hasPhase"
      class="my-[10rpx] p-[18rpx] bg-gradient-to-r from-[#e3f2fd] to-[#bbdefb] rounded-[12rpx] border-l-[6rpx] border-l-[#2196F3]"
    >
      <view class="flex justify-between text-[24rpx] mb-[6rpx]">
        <view class="font-bold">当前阶段：{{ item.currentPhase }}</view>
        <view class="text-[#43a047] font-bold">{{ item.phaseStatus }}</view>
      </view>
      <view class="text-[22rpx]"
        >金额：{{ item.phaseAmount }} | 截止：{{ item.phaseDeadline }}</view
      >
    </view>

    <!-- 元信息 -->
    <view class="flex justify-between text-[22rpx] text-[#90caf9] mb-[10rpx]">
      <view>
        <view>发布时间：{{ dayjs(item.publishTime).format('YYYY-MM-DD HH:mm:ss') }}</view>
        <view>
          <template v-if="item.status === '已结束'"
            >结束时间：{{ item.endTime }}</template
          >
          <template v-else>交付截止：{{ item.deadline }}</template>
        </view>
      </view>
      <view
        class="text-[36rpx] font-bold text-[#FF4D4F] text-right my-[8rpx]"
        >{{ item.amount }}</view
      >
    </view>

    <!-- 标签 -->
    <view class="flex flex-wrap gap-x-[10rpx] gap-y-[10rpx] mb-[10rpx]">
      <view
        v-for="(tag, tIndex) in item.tags"
        :key="tIndex"
        class="text-[20rpx] px-[16rpx] py-[6rpx] bg-[#e3f2fd] rounded-[10rpx] text-[#2196F3] font-medium"
      >
        {{ tag }}
      </view>
    </view>

    <!-- 底部状态信息 -->
    <view
      class="flex w-fullitems-center mt-[10rpx] pt-[10rpx] border-t border-[#f5f7fa]"
    >
      <view class="text-[22rpx] text-[#90caf9] mr-auto">
        <template v-if="item.status === '新发布'">
          <IconFont name="application" size="20" class="inline-block mr-1" />
          已申请：{{ item.applyCount }}人
        </template>
        <template v-if="item.status === '执行中'">
          <IconFont name="progress" size="20" class="inline-block mr-1" />
          当前进度：{{ item.progress }}%
        </template>
        <template v-if="item.status === '已结束'">
          <IconFont name="success" size="20" class="inline-block mr-1" />
          完成时间：{{ item.endTime }}
        </template>
      </view>
      <nut-button
        size="small"
        type="info"
        @click.stop="handleViewDetails"
      >
        管理
      </nut-button>
      <nut-button
        size="small"
        type="primary"
        class="!ml-2"
        @click.stop="handleDelete"
      >
        删除
      </nut-button>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { Button as nutButton } from "@nutui/nutui-taro";
import dayjs from "dayjs";

// 接收父组件传入的单个发布项数据
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  type: {
    type: Number,
    required: true,
    default: 0, // 0:日结 1:悬赏 2:招聘
  },
});

// 向父组件传递点击事件
const emit = defineEmits(["click", "viewDetails", "delete"]);

// 处理整个项点击
const handleItemClick = () => {
  emit("click", props.item);
};

// 处理管理按钮点击
const handleViewDetails = () => {
  emit("viewDetails", props.item);
};

// 处理删除按钮点击
const handleDelete = () => {
  emit("delete", props.item);
};
</script>
